<template>
  <page-container :title="route.meta.title">
    <SearchTable
      ref="tableRef"
      :table-list-api="tableListApi"
      :columns="columns"
      :convert-from-response="res => res.data"
    >
      <template #searchItems="{ colProps, formState }">
        <a-col v-bind="colProps">
          <a-form-item name="start_at|end_at" label="起止时间">
            <a-range-picker v-model:value="formState['start_at|end_at']" style="width: 100%" allow-clear />
          </a-form-item>
        </a-col>
      </template>
    </SearchTable>
    <DialogViewer v-if="pageType === PAGE_TYPE.VIEW" :form-data="formData" :items="columns" @cancel="handleCancel" />
  </page-container>
</template>

<script setup lang="tsx">
import { useRoute } from 'vue-router';
import request from '@/utils/request';
import SearchTable from '@/components/SearchTable';
import useTablePage, { PAGE_TYPE } from '@/hooks/useTablePage';
import type { IColumn, IOption, IRow } from '@/types';
import type { FormInstance } from 'ant-design-vue/es/form';

interface IOriginOption {
  id: string;
  name: string;
  [k: string]: any;
}

const route = useRoute();
const { pageType } = useTablePage();
const tableListApi = '/v1/adreview/emergencylist';
const tableRef = ref();
const auditOptions = [
  { value: '0', label: '未应急' },
  { value: '1', label: '已应急处理' },
];
const columns = computed<IColumn[]>(() => [
  {
    title: '媒体方',
    width: 80,
    dataIndex: 'media_id',
    type: 'enum',
    required: true,
    searchable: true,
    options: mediaOptions.value,
    customRender: ({ record }) => {
      const found = mediaOptions.value.find(option => option.value === record.media_id);
      return found?.label || '';
    },
  },
  {
    title: '应用',
    width: 80,
    dataIndex: 'app_id',
    type: 'enum',
    required: true,
    searchable: true,
    options: appOptions.value,
    customRender: ({ record }) => {
      const found = appOptions.value.find(option => option.value === record.app_id);
      return found?.label || '';
    },
  },
  {
    title: '广告位',
    width: 80,
    dataIndex: 'ad_site_id',
    type: 'enum',
    required: true,
    searchable: true,
    options: adSiteOptions.value,
    customRender: ({ record }) => {
      const found = adSiteOptions.value.find(option => option.value === record.ad_site_id);
      return found?.label || '';
    },
  },
  {
    title: '广告id',
    width: 80,
    dataIndex: 'adid',
  },
  {
    title: '第三方平台',
    width: 110,
    dataIndex: 'third_ad_platform',
    searchable: true,
  },
  {
    title: '广告图片url',
    width: 110,
    dataIndex: 'ad_url',
    customRender: ({ record }) => {
      return (
        <div style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          <a href={record.ad_url} target="_blank" title={record.ad_url}>
            {record.ad_url}
          </a>
        </div>
      );
    },
  },
  {
    title: '广告跳转类型', //必填
    width: 110,
    dataIndex: 'ad_action',
  },
  {
    title: '广告有效期',
    width: 110,
    dataIndex: 'ad_time',
  },
  {
    title: '广告状态',
    width: 80,
    dataIndex: 'ad_status',
  },
  {
    title: '来源',
    width: 80,
    dataIndex: 'from',
  },
  {
    title: '应急处理状态',
    width: 110,
    type: 'enum',
    dataIndex: 'emergency_review',
    searchable: true,
    options: auditOptions,
  },
  {
    title: '应急处理备注',
    width: 110,
    dataIndex: 'emergency_review_remark',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: 80,
    fixed: 'right',
    customRender: ({ record }) => {
      const btns = [
        <a-button type="link" onClick={() => handleGeting(record)}>
          查看
        </a-button>,
      ];
      return btns;
    },
  },
]);

const formData = ref<IRow>();
const handleGeting = (record: IRow) => {
  formData.value = record;
  pageType.value = PAGE_TYPE.VIEW;
};
const formRef = ref<FormInstance>();

const handleCancel = () => {
  formRef.value?.resetFields();
  pageType.value = null;
};

const mediaOptions = ref<IOption[]>([]);
const appOptions = ref<IOption[]>([]);
const adSiteOptions = ref<IOption[]>([]);
const setMediaOptions = async () => {
  const data = await request.get('/v1/media/list', { params: { page: 1, page_size: 100 } });
  mediaOptions.value = (data.data.list as IOriginOption[]).map(({ id, name }) => ({ label: name, value: id }));
};
setMediaOptions();
const setAppOptions = async () => {
  const data = await request.get('/v1/app/list', { params: { page: 1, page_size: 100 } });
  appOptions.value = (data.data.list as IOriginOption[]).map(({ id, name }) => ({ label: name, value: id }));
};
setAppOptions();

const setAdSiteOptions = async () => {
  const data = await request.get('/v1/adsite/list', { params: { page: 1, page_size: 100 } });
  adSiteOptions.value = (data.data.list as IOriginOption[]).map(({ id, name }) => ({ label: name, value: id }));
};
setAdSiteOptions();
</script>
